<template>
	<div class="app-container">
		<div class="row1">
			<span class="left-label">项目属性</span>
			<span class="label">项目分类</span>
			<el-select v-model="queryData.projectCategory" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in project_category" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<!-- <span class="label">项目周期</span>
			<el-select v-model="queryData.projectPlan" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in project_plan" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select> -->
		</div>

		<div class="row3">
			<span class="left-label">关键字</span>
			<el-input v-model="queryData.procureOrCustomerName" style="width: 350px; margin-right: 20px" placeholder="请输入搜索关键字" />
			<el-checkbox style="position: relative; top: 3px" v-model="queryData.isImportant" true-label="1" false-label="" label="重要项目" size="large" />
		</div>
		<div class="row4">
			<span class="left-label"></span>
			<el-button type="primary" @click="search">搜索</el-button>
			<el-button @click="reset">重置</el-button>
		</div>
		<BaseTable :columns="columns" :dataList="dataList">
			<template #action="{ row }">
				<el-button type="primary" size="small" plain @click="checkProject(row.projectId)"
					><el-icon style="margin-right: 5px"><View /></el-icon>审核</el-button
				>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="search" />
		<!-- 项目审核 -->
		<el-dialog :title="`项目审核`" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
			<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
				<el-form-item prop="customerId" label="所属客户">
					<el-select disabled v-model="form.customerId" placeholder="请选择所属客户" style="width: 50%; margin-right: 10px" size="default" clearable>
						<el-option v-for="dict in project_stage" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item prop="projectName" label="项目名称">
					<el-input disabled v-model="form.projectName" style="width: 50%; margin-right: 10px" placeholder="请输入项目名称" />
					<el-checkbox disabled style="position: relative; top: 3px" v-model="form.isImportant" label="是否重要项目" size="large" />
				</el-form-item>
				<el-form-item prop="projectAddress" label="项目地址">
					<el-input disabled v-model="form.projectAddress" style="width: 50%" placeholder="请输入项目地址" />
				</el-form-item>
				<el-form-item prop="projectContacts" label="联系人">
					<el-input disabled v-model="form.projectContacts" style="width: 50%" placeholder="请输入联系人" />
				</el-form-item>
				<el-form-item prop="projectMobile" label="手机号">
					<el-input disabled v-model="form.projectMobile" style="width: 50%" placeholder="请输入手机号" />
				</el-form-item>
				<el-form-item prop="projectStage" label="项目阶段">
					<el-select disabled v-model="form.projectStage" placeholder="请选择阶段" style="width: 50%" size="default" clearable>
						<el-option v-for="dict in project_stage" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item prop="projectCategory" label="项目分类">
					<el-select disabled v-model="form.projectCategory" placeholder="请选择类型" style="width: 50%" size="default" clearable>
						<el-option v-for="dict in project_category" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item prop="maoshu" label="项目描述">
					<el-input disabled v-model="form.maoshu" :rows="5" type="textarea" placeholder="请输入项目描述" />
				</el-form-item>
				<el-form-item prop="projectStatus" label="审核">
					<el-radio-group v-model="form.projectStatus">
						<el-radio label="2">审核通过</el-radio>
						<el-radio label="3">审核不通过</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="text-align: right">
					<el-button type="primary" @click="submitAdd">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import BaseTable from '@/components/BaseTable'
import { listCheckManagement } from '@/api/project/project'
const router = useRouter()
const { proxy } = getCurrentInstance()
const { project_plan, project_stage, project_category, project_status, is_important } = proxy.useDict(
	'project_plan',
	'project_stage',
	'project_category',
	'project_status',
	'is_important'
)
const columns = ref([
	{ key: 1, width: '90', label: `项目编号`, prop: 'projectCode', type: 'text', visible: true },
	{ key: 2, width: '70', label: `分类`, prop: 'projectCategory', type: 'select', data: project_category, visible: true },
	{ key: 4, label: `项目名称`, prop: 'projectName', type: 'text', visible: true },
	{ key: 12, width: '90', label: `重要项目`, prop: 'isImportant', type: 'select', data: is_important, visible: true },
	{ key: 5, width: '150', label: `所属企业`, prop: 'customerName', type: 'text', visible: true },
	{ key: 6, width: '150', label: `合同（结算）金额`, prop: 'treatyMoney', type: 'text', visible: true },
	{ key: 7, width: '90', label: `阶段`, prop: 'projectStage', type: 'select', data: project_stage, visible: true },
	{ key: 8, width: '100', label: `负责人`, prop: 'createUserCode', type: 'text', visible: true },
	{ key: 3, width: '150', label: `录入时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 10, width: '130', label: `状态`, prop: 'projectStatus', type: 'select', data: project_status, visible: true },
	{ key: 11, width: '120', label: `操作`, prop: 'action', type: 'custom', visible: true }
])
const total = ref(0)
const dataList = ref([])
const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	projectCategory: '',
	projectStatus: '',
	projectPlan: '',
	projectStage: '',
	procureOrCustomerName: '',
	isImportant: ''
})
const search = () => {
	listCheckManagement(queryData).then((res) => {
		total.value = res.total
		dataList.value = res.rows
	})
}
search()
const reset = () => {
	for (let item in queryData) {
		queryData[item] = ''
	}
	queryData['isImportant'] = ''
}
const form = reactive({
	customerId: '',
	projectName: '',
	isImportant: '2',
	projectAddress: '',
	projectContacts: '',
	projectMobile: '',
	projectStage: '',
	projectCategory: '',
	maoshu: '',
	projectStatus: ''
})
const rules = {
	customerId: [{ required: true, message: '所属客户不能为空', trigger: 'blur' }],
	projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
	projectAddress: [{ required: true, message: '项目地址不能为空', trigger: 'blur' }],
	projectContacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
	projectMobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
	projectStage: [{ required: true, message: '项目阶段不能为空', trigger: 'blur' }],
	projectCategory: [{ required: true, message: '项目分类不能为空', trigger: 'blur' }],
	maoshu: [{ required: true, message: '项目描述不能为空', trigger: 'blur' }],
	projectStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
}
const open = ref(false)
const checkProject = (id) => {
	router.push({
		path: '/project/projectCheckDetail?id=',
		query: { id: id }
	})
}
const baseform = ref()
const submitAdd = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			console.log(form)
		}
	})
}
const cancel = () => {
	for (let item in form) {
		form[item] = ''
	}
	open.value = false
}
</script>
<style lang="scss" scoped>
.header {
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 5px;
}
.items {
	display: flex;
	margin-bottom: 5px;
	.flex1 {
		flex: 1;
	}
	.flex2 {
		flex: 2;
	}
	.item {
		padding: 10px;
		border-right: 2px rgba(240, 240, 240, 1) solid;
		text-align: center;
		height: 70px;
		line-height: 25px;
	}
	.item:last-child {
		border-right: none;
	}
}
.left-label {
	color: #33b6fe;
	height: 24px;
	line-height: 24px;
	position: relative;
	top: 1px;
	margin-right: 10px;
	display: inline-block;
	min-width: 80px;
}
:deep(.el-table__header) {
	background-color: #2f3f56;
}
.row1 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
	.label {
		margin: 5px;
		padding: 8px 5px;
		font-size: 14px;
		background-color: rgb(231, 231, 231);
	}
	.select {
		width: 120px;
		position: relative;
		top: -1px;
	}
}
.row2 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
.row3 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
.row4 {
	padding: 5px 0 10px 0;
}
</style>
